
import { withRouter, Switch, BrowserRouter as Router, Route, Link } from "react-router-dom";
const Detail = (props) => {
  const { match: { params } } = props
  const { id } = params
  return (
    <div>
      params id: {id}
      <DetailTips />
    </div>
  )
}
// 需要使用高阶组件withRouter
const DetailTips = withRouter((props) => {
  const { match: { params } } = props
  console.log(1111, this.props);
  const { id } = params
  return (
    <div>params id: {id}</div>
  )
})
function App() {
  return (
    <div className="App">
      <div>
        <h2>11111</h2>
        <ul>
          <li><Link to="/RouterApp/detail">RouterAppdetail</Link></li>
          <li><Link to="/detail">detail</Link></li>

        </ul>
        <hr />
        {/* <Route path="/RouterApp/detail" exact render={() => <div>RouterAppdetail</div>} />
        <Route path="/RouterApp/detail" exact render={() => <div>detail</div>} /> */}
        {/* <Route path="/RouterApp/detail" exact component={Detail} />
        <Route path="/detail" exact component={Detail} /> */}

      </div>

      {/* <Router>
        <Switch>
          <Route path="/detail/:id" component={Detail} />
          <Route path="/RouterApp/detail" component={Detail} />
        </Switch>
      </Router> */}
    </div>
  );
}


export {
  App as RouterChild
}